<template>
    <div class="login-container">
        <el-card class="login-card">
            <h2 class="login-title">酒店管理系统</h2>
            <el-form ref="formRef" :model="data.RegisterForm" :rules="data.loginRules">
                <el-form-item prop="email">
                    <el-input v-model="data.RegisterForm.email" placeholder="请输入邮箱" prefix-icon="el-icon-user" />
                </el-form-item>

                <el-form-item prop="phone">
                    <el-input v-model="data.RegisterForm.phone" type="password" placeholder="请输入手机号"
                        prefix-icon="el-icon-lock" show-password />
                </el-form-item>

                <el-form-item prop="firstName">
                    <el-input v-model="data.RegisterForm.firstName" type="password" placeholder="请输入名"
                        prefix-icon="el-icon-lock" show-password />
                </el-form-item>

                <el-form-item prop="lastName">
                    <el-input v-model="data.RegisterForm.lastName" type="password" placeholder="请输入姓"
                        prefix-icon="el-icon-lock" show-password />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="data.RegisterForm.password" type="password" placeholder="请输入密码"
                        prefix-icon="el-icon-lock" show-password />
                </el-form-item>

                <el-form-item prop="confirmPassword">
                    <el-input v-model="data.RegisterForm.confirmPassword" type="password" placeholder="请再次输入密码"
                        prefix-icon="el-icon-lock" show-password />
                </el-form-item>

                

                <el-col :span="9" class="code">
                    <el-button type="primary" @click="getCode" :disabled="isGettingCode" plain class="code-button" width="50px">
                        {{ codeButtonText }}
                    </el-button>
                </el-col>

                <el-form-item prop="code" >
                    <el-input v-model="data.RegisterForm.code" type="password" placeholder="请输入验证码"
                        prefix-icon="el-icon-lock" show-password style="width: 250px;" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" native-type="submit" style="width: 100%" @click="login">
                        注册
                    </el-button>
                </el-form-item>
                <div class="register-link">
                    <span>已经有了账户？</span>
                    <span class="register-text" @click="goToRegister" style="color:#559afe">返回登录</span>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getCode as sendGetCode, register as sendRegister } from '@/api/register'
const isGettingCode = ref(false)
const codeButtonText = ref('获取验证码')
const router = useRouter()
const formRef = ref()
const data = reactive({
    RegisterForm: {
        email: '',
        phone: '',
        password: '',
        confirmPassword: '',
        firstName: '',
        lastName: '',
        code: ''
    },
    loginRules: {
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        lastName: [
            { required: true, message: '请输入姓', trigger: 'blur' }
        ],
        firstName: [
            { required: true, message: '请输入名', trigger: 'blur' }
        ],
        confirmPassword: [
            { required: true, message: '请输入确认密码', trigger: 'blur' }
        ],
        code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
    }
})
const login = () => {
    axios.post("/api/chapter04/login", data.RegisterForm)
        .then(res => {
            if (res.data.status === 'success') {
                ElMessage.success('登录成功')
                console.log(data.RegisterForm)
                router.push('/admin/dashboard')
            } else {
                ElMessage.error(res.data.message)
            }
        })
        .catch(error => {
            ElMessage.error('登录失败')
            console.error(error)
        })
}

const getCode = async () => {
    if (!data.RegisterForm.email) {
        ElMessage.warning('请先填写邮箱')
        return
    }

    try {
        // 发送请求获取验证码（仅携带邮箱）
        const res = await sendGetCode({ email: data.RegisterForm.email })

        if (res.code === 1) {
            startCountdown()
            ElMessage.success('验证码已发送')
        } else {
            ElMessage.error(res.msg || '验证码发送失败')
        }
    } catch (error) {
        ElMessage.error('网络错误，请重试')
        console.error('获取验证码失败:', error)
    }
}
const goToRegister = () => {
    router.push('/login') // 确保你有 /register 页面
}
</script>

<style scoped>
.code {
    float: right;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
}

.login-card {
    width: 400px;
    padding: 20px;
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
    color: #409EFF;
}
</style>